<template>
  <div class="home-bottom">
    <div style="text-align: center;">

      <!-- 下载栏选项 -->
      <a v-for="(item, i) in iconList" :key="i" class="icon-item" hidefocus="true" :href="item.downloadUrl">
        <div :class="`${item.type} logo`"></div>
        <div style="margin-top: 6px;font-weight: bolder">{{ item.label }}</div>
      </a>
      
      <!-- 版权栏 -->
      <div style="margin-top: 40px">
        <span style="color: #b6bac3;margin-right: 4px;font-size: 12px;">©2021 Baidu</span>
        <div v-for="(item, i) in copyrightList" :key="item.label" class="copyright-item">
          <a href="javascript:;" :target="item.url">{{item.label}}<span>{{ i === (copyrightList.length - 1) ? '|' : '' }}</span>
          </a>
        </div>
      </div>

    </div>
  </div>
</template>

<script>
export default {
  name: 'HomeBottom',
  data() {
    return {
      iconList: [
        { type: 'windows', label: 'Windows', downloadUrl: 'https://issuecdn.baidupcs.com/issue/netdisk/yunguanjia/BaiduNetdisk_7.8.3.1.exe' },
        { type: 'android', label: '安卓', downloadUrl: 'http://issuecdn.baidupcs.com/issue/netdisk/apk/BaiduNetdisk_11.15.2.apk' },
        { type: 'iphone', label: 'iPhone', downloadUrl: 'http://itunes.apple.com/cn/app/bai-du-wang-pan/id547166701?mt=8' },
        { type: 'ipad', label: 'iPad', downloadUrl: 'http://itunes.apple.com/cn/app/bai-du-yun-hd/id554602005?mt=8' },
        { type: 'mac', label: 'Mac', downloadUrl: 'https://issuecdn.baidupcs.com/issue/netdisk/MACguanjia/BaiduNetdisk_mac_4.1.0.dmg' },
      ],
      copyrightList: [
        { label: '商务合作', url: '#' },
        { label: '移动开放平台', url: 'http://m.baidu.com/error.jsp' },
        { label: '服务协议', url: 'https://pan.baidu.com/disk/main#/protocol/duty_mobi' },
        { label: '权利声明', url: 'http://yun.baidu.com/disk/privacy' },
        { label: '版本更新', url: 'https://yun.baidu.com/disk/version' },
        { label: '帮助中心', url: 'https://yun.baidu.com/disk/help' },
        { label: '版权投诉', url: 'https://passport.baidu.com/v2/' },
        { label: '百度营销', url: 'http://e.baidu.com/' },
        { label: '企业认证', url: 'https://pan.baidu.com/disk/cert/#/web/home' },
      ]
    }
  },
  mounted() {
  }
}
</script>

<style lang="less">
.home-bottom {
  width: 100%;
  height: 190px;

  .logo {
    width: 48px;
    height: 48px;
    display: inline-block;
  }

  .windows {
    background: url('../../assets/images/windows.png');
    &:hover {
      background: url('../../assets/images/windows-hover.png');
    }
  }

  .android {
    background: url('../../assets/images/android.png');
    &:hover {
      background: url('../../assets/images/android-hover.png');
    }
  }

  .iphone {
    background: url('../../assets/images/iPhone.png');
    &:hover {
      background: url('../../assets/images/iPhone-hover.png');
    }
  }

  .ipad {
    background: url('../../assets/images/ipad.png');
    &:hover {
      background: url('../../assets/images/ipad-hover.png');
    }
  }

  .mac {
    background: url('../../assets/images/mac.png');
    &:hover {
      background: url('../../assets/images/mac-hover.png');
    }
  }

  .icon-item {
    display: inline-block;
    width: 90px;
    height: 70px;
    margin: 30px;
    text-align: center;
    font-size: 14px;
    cursor: pointer;
    color: #2c2c2c;
  }

  .copyright-item {
    display: inline-block;
    font-size: 12px;
    a {
      color: #999999;
      span {
        margin: 0 2px;
      }
    }
  }
}
</style>